18.1 Customer Support Agent：智能客服系统
项目定位：一个完整的 AI 客服解决方案，集成 Claude API 与 Amazon Bedrock Knowledge Base，展示如何构建具备知识库检索、情绪检测和可配置 UI 的企业级客服系统。
1. 项目概述
1.1 核心功能
Customer Support Agent 是一个高度可定制的客户支持聊天界面，具备以下核心能力：
| 功能 | 描述 |
|---|---|
| AI 驱动对话 | 使用 Claude 3 Haiku / Claude 3.5 Sonnet 处理用户问题 |
| RAG 集成 | 通过 Amazon Bedrock Knowledge Base 检索企业知识库 |
| 思维过程展示 | 实时显示 AI 的推理过程，便于调试和理解 |
| 知识库可视化 | 展示引用的源文档，增强回答的可信度 |
| 情绪检测 | 自动识别用户情绪，必要时升级到人工客服 |
| 多布局支持 | 可配置的 UI 布局（全功能/仅聊天/左右侧边栏） |
1.2 技术栈
┌─────────────────────────────────────────────────────────┐
│ 前端 (Frontend) │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ Next.js │ │ TypeScript│ │ Tailwind │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ ┌───────────┐ │
│ │ shadcn/ui │ ← UI 组件库 │
│ └───────────┘ │
├─────────────────────────────────────────────────────────┤
│ 后端 (Backend) │
│ ┌───────────────────────────────────────────────────┐ │
│ │ Next.js API Routes │ │
│ └───────────────────────────────────────────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌───────────┐ ┌───────────────┐ │
│ │ Claude API│ │ AWS Bedrock │ │
│ │ (Anthropic) │ Knowledge Base│ │
│ └───────────┘ └───────────────┘ │
├─────────────────────────────────────────────────────────┤
│ 部署 (Deployment) │
│ ┌───────────────────────────────────────────────────┐ │
│ │ AWS Amplify │ │
│ └───────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘2. 项目结构解析
2.1 目录结构
customer-support-agent/
├── app/ # Next.js 应用目录
│ ├── api/ # API 路由
│ │ ├── chat/ # 聊天接口
│ │ └── knowledge/ # 知识库接口
│ ├── page.tsx # 主页面
│ └── layout.tsx # 布局组件
├── components/ # React 组件
│ ├── ui/ # shadcn/ui 基础组件
│ ├── ChatArea.tsx # 聊天区域（核心）
│ ├── LeftSidebar.tsx # 左侧边栏（模型选择）
│ ├── RightSidebar.tsx # 右侧边栏（知识库引用）
│ └── ThinkingProcess.tsx # 思维过程展示
├── lib/ # 工具函数
│ ├── anthropic.ts # Claude API 客户端
│ └── bedrock.ts # Bedrock 客户端
├── styles/ # 样式配置
│ └── themes.js # 主题定义
├── config.ts # 应用配置
├── .env.local # 环境变量（本地）
└── package.json2.2 核心组件职责
| 组件 | 职责 |
|---|---|
ChatArea.tsx | 聊天界面核心，管理对话状态、调用 API、渲染消息 |
LeftSidebar.tsx | 模型选择、知识库选择、系统配置 |
RightSidebar.tsx | 展示知识库引用的源文档 |
ThinkingProcess.tsx | 实时展示 Claude 的推理过程（思考链） |
3. 核心实现详解
3.1 模型配置
在 ChatArea.tsx 中定义可用的 Claude 模型：
typescript
// 模型配置
const models: Model[] = [
{ id: "claude-3-haiku-20240307", name: "Claude 3 Haiku" },
{ id: "claude-3-5-sonnet-20240620", name: "Claude 3.5 Sonnet" },
];
// 知识库配置
const knowledgeBases: KnowledgeBase[] = [
{ id: "your-knowledge-base-id", name: "产品文档库" },
{ id: "another-kb-id", name: "FAQ 知识库" },
];
// 状态管理
const [selectedModel, setSelectedModel] = useState("claude-3-haiku-20240307");
const [selectedKB, setSelectedKB] = useState<string | null>(null);选择建议：
- Claude 3 Haiku：响应速度快，成本低，适合简单问答
- Claude 3.5 Sonnet：更强的推理能力，适合复杂问题
3.2 RAG 实现流程
用户提问
│
▼
┌────────────────────────────────────────┐
│ 1. 知识库检索 (Amazon Bedrock) │
│ • 将问题转换为向量 │
│ • 在知识库中搜索相似文档 │
│ • 返回 Top-K 相关片段 │
└────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────┐
│ 2. 上下文构建 │
│ • 将检索到的文档片段拼接 │
│ • 构建包含上下文的 System Prompt │
└────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────┐
│ 3. Claude 生成回答 │
│ • 基于上下文理解问题 │
│ • 生成引用源文档的回答 │
└────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────┐
│ 4. 展示结果 │
│ • 渲染 AI 回答 │
│ • 右侧边栏展示引用来源 │
└────────────────────────────────────────┘3.3 知识库集成代码示例
typescript
// lib/bedrock.ts
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";
const bedrockClient = new BedrockRuntimeClient({
region: "us-east-1",
credentials: {
accessKeyId: process.env.BAWS_ACCESS_KEY_ID!,
secretAccessKey: process.env.BAWS_SECRET_ACCESS_KEY!,
},
});
// 检索知识库
async function retrieveFromKnowledgeBase(
query: string,
knowledgeBaseId: string
): Promise<RetrievalResult[]> {
const command = new RetrieveCommand({
knowledgeBaseId,
retrievalQuery: { text: query },
retrievalConfiguration: {
vectorSearchConfiguration: {
numberOfResults: 5, // 返回 Top 5 结果
},
},
});
const response = await bedrockClient.send(command);
return response.retrievalResults || [];
}3.4 情绪检测与升级机制
系统能够检测用户的情绪状态，当检测到负面情绪时自动升级：
typescript
// 情绪检测 Prompt 片段
const sentimentPrompt = `
分析用户消息的情绪：
- 如果用户表现出强烈不满、愤怒或挫败感，返回 "ESCALATE"
- 如果用户情绪平稳或积极，返回 "CONTINUE"
用户消息: "${userMessage}"
`;
// 处理升级逻辑
if (sentiment === "ESCALATE") {
// 通知人工客服接管
await notifyHumanAgent(conversationId);
// 向用户发送升级通知
return {
message: "我理解您的困扰。正在为您转接人工客服，请稍候...",
escalated: true,
};
}4. 环境配置
4.1 环境变量
创建 .env.local 文件：
env
# Anthropic API Key
ANTHROPIC_API_KEY=sk-ant-api03-xxxxx
# AWS 凭证（注意：使用 BAWS 前缀，因为 AWS Amplify 不允许 AWS 开头的变量名）
BAWS_ACCESS_KEY_ID=AKIAXXXXXXXX
BAWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxx
# 可选：侧边栏配置
NEXT_PUBLIC_INCLUDE_LEFT_SIDEBAR=true
NEXT_PUBLIC_INCLUDE_RIGHT_SIDEBAR=true4.2 AWS 权限配置
需要为 AWS IAM 用户附加以下策略：
json
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"bedrock:InvokeModel",
"bedrock:Retrieve",
"bedrock:RetrieveAndGenerate"
],
"Resource": "*"
}
]
}或直接附加 AmazonBedrockFullAccess 托管策略。
4.3 创建 Bedrock 知识库
- 登录 AWS Console → Amazon Bedrock → Knowledge Base
- 点击 "Create knowledge base"
- 选择数据源（推荐 S3）
- 选择嵌入模型（推荐 Titan Text Embeddings v2）
- 创建向量存储（Quick create）
- 获取 Knowledge Base ID
Knowledge Base 创建流程：
S3 存储桶 → Bedrock 处理 → 向量数据库
(PDF, TXT, MD...) (分块 + 嵌入) (OpenSearch)
│
▼
Knowledge Base ID
(用于 API 调用)5. 运行与部署
5.1 本地开发
bash
# 安装依赖
npm install
# 运行完整应用（包含两个侧边栏）
npm run dev
# 运行仅聊天模式
npm run dev:chat
# 运行仅左侧边栏
npm run dev:left
# 运行仅右侧边栏
npm run dev:right访问 http://localhost:3000 查看应用。
5.2 AWS Amplify 部署
步骤 1：连接 GitHub 仓库
- AWS Console → Amplify → "Create new app"
- 选择 GitHub 并授权
- 选择仓库和分支
步骤 2：配置构建设置
编辑 amplify.yml：
yaml
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci --cache .npm --prefer-offline
build:
commands:
- npm run build
- echo "ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY" >> .env
- echo "BAWS_ACCESS_KEY_ID=$BAWS_ACCESS_KEY_ID" >> .env
- echo "BAWS_SECRET_ACCESS_KEY=$BAWS_SECRET_ACCESS_KEY" >> .env
artifacts:
baseDirectory: .next
files:
- "**/*"
cache:
paths:
- .next/cache/**/*
- .npm/**/*步骤 3：配置环境变量
在 Amplify Console → App settings → Environment variables 中添加：
| 变量名 | 值 |
|---|---|
ANTHROPIC_API_KEY | 你的 Anthropic API Key |
BAWS_ACCESS_KEY_ID | AWS Access Key ID |
BAWS_SECRET_ACCESS_KEY | AWS Secret Access Key |
步骤 4：配置 Amplify 服务角色
部署完成后，需要给 Amplify 服务角色添加 Bedrock 权限：
- 找到 Amplify 使用的 Service Role ARN
- 在 IAM Console 中找到该角色
- 附加
AmazonBedrockFullAccess策略
6. 自定义与扩展
6.1 主题定制
在 styles/themes.js 中修改颜色主题：
javascript
export const themes = {
neutral: {
light: {
primary: "#3b82f6", // 主色调
background: "#ffffff", // 背景色
text: "#1f2937", // 文字颜色
border: "#e5e7eb", // 边框颜色
},
dark: {
primary: "#60a5fa",
background: "#111827",
text: "#f9fafb",
border: "#374151",
}
},
};6.2 添加新的知识库
在 ChatArea.tsx 中扩展知识库列表：
typescript
const knowledgeBases: KnowledgeBase[] = [
{ id: "kb-product-docs", name: "产品文档" },
{ id: "kb-faq", name: "常见问题" },
{ id: "kb-troubleshooting", name: "故障排除" }, // 新增
];6.3 自定义系统提示
typescript
const systemPrompt = `
你是一位专业的客户支持代理，服务于 [公司名称]。
核心职责：
1. 准确回答用户关于产品和服务的问题
2. 使用友好、专业的语气
3. 当引用知识库内容时，明确说明来源
4. 如果不确定答案，诚实地说明并建议联系人工客服
回答格式：
- 使用简洁清晰的语言
- 适当使用列表和要点
- 提供具体的操作步骤
`;7. 架构亮点与最佳实践
7.1 关键设计决策
| 决策 | 理由 |
|---|---|
| 使用 Next.js API Routes | 简化部署，前后端统一 |
| AWS Bedrock 而非自建向量库 | 托管服务，无需维护基础设施 |
| 环境变量用 BAWS 前缀 | 绕过 Amplify 的 AWS 变量限制 |
| 可配置的 UI 布局 | 适应不同的部署场景（嵌入/独立） |
7.2 生产化建议
- 添加用户认证：集成 Cognito 或其他身份服务
- 对话持久化：使用 DynamoDB 保存对话历史
- 速率限制：防止 API 滥用
- 监控告警：接入 CloudWatch 监控关键指标
- 多语言支持：使用 i18n 框架
8. 总结
Customer Support Agent 展示了一个完整的企业级客服解决方案：
| 方面 | 评价 |
|---|---|
| 代码质量 | ⭐⭐⭐⭐ 结构清晰，TypeScript 类型完善 |
| 功能完整度 | ⭐⭐⭐⭐⭐ RAG + 情绪检测 + 可配置 UI |
| 部署难度 | ⭐⭐⭐ 需要配置 AWS 服务 |
| 扩展性 | ⭐⭐⭐⭐ 模块化设计，易于定制 |
适用场景：
- 需要快速搭建智能客服系统的团队
- 已有 AWS 基础设施的企业
- 希望学习 RAG 最佳实践的开发者
学习要点：
- Next.js + Claude API 的集成模式
- Amazon Bedrock Knowledge Base 的使用
- 企业级 AI 应用的 UI/UX 设计
下一节，我们将深入学习 Financial Data Analyst，看看如何用 Claude 构建智能数据分析工具。